@if (conversation()) {
  @if (parameters()?.length) {
    <xpert-parameters-card class="w-full mb-4" [parameters]="parameters()"
      [(ngModel)]="parametersValue"
    />
  }
}

@for (message of messages(); track message.id) {
  @switch (message.role) {
    @case ('user') {
      <div class="w-full flex justify-end my-4">
        <div class="max-w-[70%] p-4 whitespace-pre-wrap rounded-2xl bg-black/5 dark:bg-white/10">{{ message.content }}</div>
      </div>
    }
    @case ('human') {
      <div class="w-full flex justify-end my-4">
        <div class="max-w-[70%] p-4 whitespace-pre-wrap rounded-2xl bg-black/5 dark:bg-white/10">{{ message.content }}</div>
      </div>
    }
    @case ('assistant') {
      <pac-ai-message class="my-4 py-2 lg:px-2" [message]="message" [showExecution]="showExecution()" />
    }
    @case ('ai') {
      <pac-ai-message class="my-4 py-2 lg:px-2" [message]="message" [showExecution]="showExecution()" />
    }
  }
} @empty {
  @if (!loadingConv() && xpert()) {
    <div class="w-full h-full flex flex-col justify-center items-center gap-4">
      <emoji-avatar [avatar]="xpert().avatar" large class="rounded-xl overflow-hidden shadow-sm" />

      <div class="w-full flex flex-col items-center gap-2">
        <p class="text-xl">{{xpert().title || xpert().name}}</p>
        <p class="w-96 text-center text-text-secondary line-clamp-5" [title]="xpert().description">{{xpert().description}}</p>
      </div>

      <div class="mx-3 mt-12 flex max-w-3xl flex-wrap items-stretch justify-center gap-4 mb-8">
        @for (statement of xpert().starters; track statement) {
          @if (statement) {
            <button class="relative flex w-40 flex-col gap-2 rounded-xl border border-token-border-light px-2 pb-3 pt-2 text-start align-top text-sm shadow-sm
              md:text-base md:px-3 md:pt-3 md:pb-4 md:rounded-2xl
              transition enabled:hover:bg-token-main-surface-secondary disabled:cursor-not-allowed"
              (click)="chatInput().ask(statement)"
            >
              <div class="line-clamp-3 max-w-full text-balance font-light text-neutral-500 dark:text-neutral-500 break-word"
                [title]="statement"
              >
                {{statement}}
              </div>
            </button>
          }
        }
      </div>

      @if (parameters()?.length) {
        <xpert-parameters-card class="w-full mb-4" [parameters]="parameters()"
          [(ngModel)]="parametersValue"
        />
      }
    </div>
  }
}

@if (conversationStatus() === eExecutionStatusEnum.ERROR) {
  <div class="w-full flex items-start gap-2 p-4 rounded-3xl text-orange-500 bg-orange-50 border border-solid border-orange-200">
    <div >
      <i class="ri-information-2-line text-xl"></i>
    </div>
    <div class="flex-1 py-1">{{error()}}</div>

    <button type="button" class="btn btn-small text-text-primary" (click)="onRetry()">
      {{ 'PAC.KEY_WORDS.Retry' | translate: {Default: 'Retry'} }}
    </button>
  </div>
}

@if (conversationStatus() === eExecutionStatusEnum.INTERRUPTED && operation()) {
  <xpert-tool-call-confirm class="w-full max-w-xl mx-auto bg-components-card-bg"
    [operation]="operation()"
    (confirm)="onConfirm()"
    (reject)="onReject()"
    (toolCallsChange)="onToolCalls($event)"
  />
}